<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>面积图</title>
<link rel="stylesheet" type="text/css" href="css/highchart.css" />
</head>
<body>
	<div id="container" style="width:600px;height:400px"></div>
</body>
<script type="text/javascript" src="js/jquery/jquery-1.8.3.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>
<script src="js/modules/export-csv.js"></script>
<script src="js/lang/highcharts-lang-cn.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#container').highcharts({
			chart : {
				type : "area",
				//缩放
				zoomType : 'x'
			},
			//主标题
			title : {
				text : '城市温度'
			},
			subtitle : {
				text : '二级标题'
			},
			xAxis : {
				title : {
					text : '月份'
				},
				categories : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ]
			},

			yAxis : {
				title : {
					text : '温度'
				}
			},
			series : [ {
				name : '东京',
				data : [ 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 ]
			}, {
				name : '纽约',
				data : [ -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5 ]
			}, {
				name : '柏林',
				data : [ -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0 ]
			}, {
				name : '伦敦',
				data : [ 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8 ]
			} ]
		});
	});
</script>
</html>